<template>
	<view class="content">

		<uv-vtabs :chain="chain" :list="list" keyName="name" :barItemBadgeStyle="{right:'20px',top:'12px'}"
			:barItemStyle="{fontSize:'28rpx'}" :current="value" :barItemActiveStyle="{color:'#49806F',fontSize:'28rpx'}"
			:barItemActiveLineStyle="{background:'#49806F'}" @change="change">
			<uv-vtabs-item>
				<block v-if="list2.length">
					<view class="" v-for="(item,index) in list2" :key="index" style="padding: 0 38rpx 0 22rpx;">
						<view class="justify-between align-center twoCate">
							{{item.name}}
							<view class="align-center" @click="togoodsCate()">
								更多 <uv-icon name="arrow-right" size="10"></uv-icon>
							</view>
						</view>
						<template v-for="(item2,index2) in list[value].goodslist">
							<view class="item justify-between align-center" v-if="item2.two_id==item.id" :key="index2"
								@click="toactMain(item2)">
								<image :src="item2.image" mode="aspectFit"></image>
								<view class="flex1 flex-col justify-between" style="height: 175rpx;">
									<view class="item-title clamp2">
										{{item2.title}}
									</view>
									
									<view class="item-price posRelative" v-if="item2.show_status==1">
										
										￥<text>{{item2.show_price}}</text>
										<image class="posAbsort" src="../../static/images/cart.png" mode="widthFix"></image>
									</view>
							
								</view>
							</view>
						</template>
					</view>
					<view class="h20">
						
					</view>


				</block>
				<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>

			</uv-vtabs-item>
		</uv-vtabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				chain: false,
				value: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				imgList: [],
				list2: [],

				categoryId: "",

			}
		},

		onReady() {

		},
		onShow() {
			this.getCate(0)
		},
		methods: {
			async getCate(index) {
				const {
					data,
					code
				} = await this.$api.goodslist()
				console.log(data, code)
				uni.hideLoading()
				if (code == 1) {
					this.list = data
					this.categoryId = data[this.value].id
					this.value = index
					console.log(this.value)
					this.list2 = data[index].two_cate
					// this.getList()
				}
			},
			async getList() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: this.categoryId
				})
				console.log(code, data)
				if (code == 200) {
					this.list2 = data
				}
			},
			change(index) {
				this.value = index;
				this.list2 = this.list[index].two_cate
				this.categoryId = this.list[index].id
				
			},
			toactMain(item) {
			uni.navigateTo({
				url:'/pages/goodsMain/index?id='+item.id
			})
			}
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.item {
		// padding: 22rpx 20rpx 22rpx 32rpx;
		margin-top: 30rpx;
		image {
		width: 175rpx;
		height: 175rpx;
		
		border-radius: 15rpx;
		margin-right: 20rpx;
		}

		&-title {
			font-weight: 500;
				font-size: 28rpx;
				color: #333;
				line-height: 34rpx;

			
		}

		
		&-price {
			font-size: 24rpx;
			color: #49806F;
			
			text {
				font-size: 32rpx;
				line-height: 32rpx;
			}
			image{
				width: 44rpx;
				right: 0;
				bottom: 0;
			}
		}
	}

	.gap {
		padding: 0 30rpx;
	}

	
	.twoCate{
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		margin-top: 40rpx;
		view{
			font-weight: 400;
			font-size: 24rpx;
			color: #888888;
		}
	}
</style>